<template>
  <div id="app">
    <router-view />
    <AppBackHandler />
  </div>
</template>

<script setup>
import { useThemeStore } from './stores/theme'
import AppBackHandler from './components/AppBackHandler.vue'

// 初始化主题
const themeStore = useThemeStore()
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* 浅色主题变量 */
  --bg-primary: #f5f5f5;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --text-primary: #303133;
  --text-secondary: #606266;
  --text-muted: #909399;
  --border-color: #e0e0e0;
  --header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --hover-bg: #f5f7fa;
  --today-bg: #e6f7ff;
  --today-border: #1890ff;
  --records-bg: #f6ffed;
  --diary-bg: #fff7e6;
}

.dark-theme {
  /* 深色主题变量 */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-card: #2d2d2d;
  --text-primary: #ffffff;
  --text-secondary: #e0e0e0;
  --text-muted: #a0a0a0;
  --border-color: #404040;
  --header-bg: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  --shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  --hover-bg: #3a3a3a;
  --today-bg: #1e3a5f;
  --today-border: #409eff;
  --records-bg: #1f3d1f;
  --diary-bg: #3d2f1f;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

#app {
  min-height: 100vh;
  background-color: var(--bg-primary);
}

/* Element Plus 主题覆盖 */
.dark-theme .el-card {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-theme .el-button {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-theme .el-button:hover {
  background-color: var(--hover-bg);
}

.dark-theme .el-input__inner {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-theme .el-textarea__inner {
  background-color: var(--bg-secondary);
  border-color: var(--border-color);
  color: var(--text-primary);
}

.dark-theme .el-header {
  background: var(--header-bg) !important;
}

.dark-theme .el-main {
  background-color: var(--bg-primary);
}

/* 移动端适配 */
@media (max-width: 768px) {
  html.app-5plus .header {
    padding-top: var(--status-bar-height);
    height: calc(55px + var(--status-bar-height));
  }
  
  /* 统一的移动端头部适配 */
  .header-content {
    flex-direction: row;
    padding: 10px 0;
    gap: 6px;
  }
  
  .page-title {
    padding: 6px 12px !important;
    gap: 8px !important;
  }
  
  .title-icon {
    font-size: 20px !important;
  }
  
  .page-title h2 {
    font-size: 16px !important;
  }
  
  .back-btn {
    padding: 6px 10px !important;
    font-size: 14px !important;
  }
  
  .el-card {
    margin: 10px;
  }
  
  .el-button {
    font-size: 14px;
  }
}
</style> 